<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
    var option = {
            tooltip : {
                trigger: 'axis',
                // show:false,//添加鼠标浮动窗口就消失了
                axisPointer: {
                    
                    type: 'line',//指示器类型。  cross' 十字准星指示器 其他选项 line  shadow
                    label: {
                        backgroundColor: 'rgba(25, 255, 255, 1)'//XY轴显示的小方块
                    },
                    crossStyle: {//线的颜色 axisPointer.type 为 'cross' 时有效。
                        color: '#f00'
                    }
                }
            },
            backgroundColor : 'rgba(43, 62, 75, .5)',//背景颜色
            toolbox: {//工具栏
                show: false//是否显示工具栏组件
            },
            legend: {
                data:['个人收益','沪深300收益'],
                textStyle : {
                    color : '#767C8A',
                    fontSize: 12
                },
                orient:'vertical',
                // width:92,
                // height:34,
                right:56,
                itemWidth:19,
                itemHeight:3
            },
            grid : {
                left : '12%',
                right : '7%',
                bottom : '3%',
                containLabel : true,
                
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,//x轴两侧留白策略
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#767C8A',
                            fontSize: 12
                        }
                    },
                    splitLine : {//去掉网格线
                        show : false
                    },
                    axisLine : {
                        lineStyle : {
                            color : '#15171E',
                            // opacity:0,
                            fontSize: 15
                        }
                    },
                    axisTick : {
                        lineStyle : {
                            color : '#15171E',
                            fontSize: 15
                        }
                    },
                    data : ['2018年2月','2018年4月','2018年6月','2018年8月','2018年10月'],
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    // gridIndex:5,
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#767C8A',
                            fontSize: 15
                        }
                    },
                    splitLine : {//去掉网格线
                        show : false
                    },
                    axisLine : {
                        lineStyle : {
                            color : '#15171E',
                            fontSize: 15
                        }
                    },
                    axisTick : {
                        lineStyle : {
                            color : '#15171E',
                            fontSize: 15
                        }
                    }
                }
            ],
            series : [
                        
                        {
                            name:'个人收益',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            color:['#2461BC'],//对应上面data的背景色
                            data:[-0.3, 0.22, 1.1, 0.4, 0.90]
                        },{
                            name:'沪深300收益',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            color:['#BD6722 '],//对应上面data的背景色
                            data:[-0.20, 1.32, 1.01, 1.4, 0.90]
                        }
                    ]
        };

    myChart.setOption(option);
</script>
</body>  
</html>  